<style>
    *{margin: 0;padding: 0;}
    #root{height: 100%;display: flex;}
    .left{background-color: rgba(48, 58, 74);width: 200px;height: 100%;transition: all .5s;}
    .right{
        flex: 1;
        background-color: #ccc;
    }
    .top{
        margin-bottom: 30px;  
        height: 50px;
        box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
        background-color: #fff;
        overflow: hidden;
    }
    .content{
        width: 96%;
        margin: auto;
    }
    .right .content > h1 {
        background-color: #fff;
        min-height: 200px;
        padding: 20px;
        height: 80%;
        overflow-y: scroll;
        box-sizing: border-box;
    }
</style>
<link rel="stylesheet" href="//at.alicdn.com/t/font_3212552_af1lmojpg7i.css">
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<div id="root">
    <div class="left" :style="{width:kuandu}">
        <h1 @click="who = 'shouye'">{{menuWidth==='64px'?'后台':'后台首页'}}</h1>
        <h1 @click="who = 'shangpin'">{{'商品管理' | menuTitleSubStr(menuWidth) }}</h1>
        <h1 @click="who = 'dingdan'">{{'订单管理' | menuTitleSubStr(menuWidth) }}</h1>
    </div>
    <div class="right">
        <div class="top">
            <button @click="qiehuan" :class="caidan" style="font-size:20px"></button>
            <span>首页&gt;</span>
            <transition enter-active-class="animated fadeInRight">
                <span  :key="item.token" style="display: inline-block;" v-for="item in [
                {id:1, token: 'shangpin', menu1: '商品管理', menu2: '商品列表'},
                {id:2, token: 'dingdan',menu1: '订单管理', menu2: '订单列表'},
                {id:3, token: 'shouye', menu1: '首页管理', menu2: '欢迎页'}
                ]" v-if="who === item.token">{{item.menu1}} &gt; {{item.menu2 }}</span> 
            </transition>
        </div>
        <div class="content">
            <transition
                appear
                enter-active-class="animated fadeInRight"
            >
                <compontent :is="who"></compontent>
            </transition>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('shouye', {template: `<h1>首页内容</h1>`})
Vue.component('shangpin', {template: `<h1>商品内容</h1>`})
Vue.component('dingdan', {template: `<h1>订单内容</h1>`})
Vue.filter('menuTitleSubStr', (value, menuWidth) => {
    return menuWidth==='64px'? value.substr(0, 2) : value
})
const vm = new Vue({
    el: "#root",
    data: {
        who:'shouye',
        kuandu:'200px',
        caidan:{'iconfont icon-shouqicaidan':true}
    },
    methods: {
        qiehuan(){
            this.kuandu=this.kuandu==='200px'?'64px':'200px',
            this.caidan=this.kuandu==='200px'?{'iconfont icon-shouqicaidan':true}:{'iconfont icon-zhankaicaidan':true}
        }
    }
})
</script>